-
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jq购物车效果2</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/cart.css" />
</head>

<body>
    <div id="main" class="hander-car">
        <div class="store-content">
            <div class="cart-box">
                <div class="title">
                    <h2>购物清单</h2>
                </div>
                <div class="cart-inner">
                    <div>
                        <div class="cart-table-title">
                            <span class="name">商品信息</span>
                            <span class="operation">操作</span>
                            <span class="subtotal">小计</span>
                            <span class="num">数量</span>
                            <span class="price">单价</span>
                        </div>
                        <div class="cart-table">
                            <div class="cart-group">
                                <!--购物列表-->
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <!-- 勾选商品  选中：checkbox-on -->
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <!-- 小计 -->
                                        <div class="subtotal">¥ 49.00</div>
                                        <!-- 件数的操作 -->
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="1" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <!-- 单价 -->
                                        <div class="price">¥ 100.00</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="1" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 200</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="10" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 49.00</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="2" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 58.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-bottom-bg fix-bottom">
                    <div class="cart-bar-operation">
                        <div>
                            <div class="choose-all js-choose-all">
                                <span class="blue-checkbox-new" id="chooseall"><a></a></span>
                                全选
                            </div>
                            <!-- <div class="delete-choose-goods">删除选中的商品</div> -->
                        </div>
                    </div>
                    <div class="shipping">
                        <div class="shipping-box">
                            <div class="shipping-total shipping-num">
                                <h4 class="">
                                    已选择 <i id="yixuan">0</i> 件商品
                                </h4>
                                <h5>
                                    共计 <i id="gongji">0</i> 件商品
                                </h5>
                            </div>
                            <div class="shipping-total shipping-price">
                                <h4 class="">
                                    应付总额：<span>￥</span><i class="moneyall">0</i>
                                </h4>
                                <h5 class="shipping-tips">
                                    应付总额不含运费
                                </h5>

                            </div>
                        </div>
                        <span class="jianguo-blue-main-btn big-main-btn js-checkout disabled-btn"><a>现在结算</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        //ru结算按钮高亮
        function jsCheckoutClass() {
            let result = $.makeArray($('.cart-group .blue-checkbox-new')).some(item => {
                return item.classList.contains('checkbox-on')
            })
            // console.log($.makeArray($('.cart-group .blue-checkbox-new')));
            if (result) {
                $('.js-checkout').removeClass('disabled-btn');
            } else {
                $('.js-checkout').addClass('disabled-btn');
            }
        }
        //单选按钮
        $('.cart-group .blue-checkbox-new').click(function (e) {
            $(this).toggleClass('checkbox-on');
            jsCheckoutClass()
            let allChoose = $.makeArray($('.cart-group .blue-checkbox-new')).every(item => {
                return item.classList.contains('checkbox-on')
            })
            if (allChoose) {
                $('#chooseall').addClass('checkbox-on');
            } else {
                $('#chooseall').removeClass('checkbox-on');
            }
        });

        //全选按钮
        $('#chooseall').click(function (e) {
            $(this).toggleClass('checkbox-on');
            if ($(this).hasClass('checkbox-on')) {
                $('.cart-group .blue-checkbox-new').addClass('checkbox-on');
            } else {
                $('.cart-group .blue-checkbox-new').removeClass('checkbox-on');
            }
            jsCheckoutClass()
        });

       
        function btnClass(obj, index) {
            //如果数量是1，则禁用减，否则不用禁
            if (obj.value === "1") {
                $('.down').eq(index).addClass('down-disabled')
            } else {
                $('.down').eq(index).removeClass('down-disabled')
            }
            //如果数量是10，则禁用加，否则不用禁
            if (obj.value === "10") {
                $('.up').eq(index).addClass('up-disabled')
            } else {
                $('.up').eq(index).removeClass('up-disabled')
            }
        }

         //初始化效果,加减按钮样式，小计
        //遍历所有的input
        $('.num input').each(function (index, item) {
            btnClass($(this), index)
            let danjia = $('div.price').eq(index).html().slice(1).trim()
            let shuliang = $(this).val()
            $('div.subtotal').eq(index).html('￥' + Number(danjia * shuliang))
        });


        $('.up').click(function (e) {
            let num = $('.up').index(this)
            let text = $('.num input').eq(num).val()
            text++
            if (text >= 10) {
                text = 10
                $(this).addClass('up-disabled')
            }
            if(text>1){
                $('.down').eq(num).removeClass('down-disabled')
            }
            $('.num input').eq(num).val(text)

        });

        $('.down').click(function (e) {
            let num = $('.down').index(this)
            let text = $('.num input').eq(num).val()
            text--
            if (text <=1) {
                text = 1
                $(this).addClass('down-disabled')
            }
            if(text<10){
                $('.up').eq(num).removeClass('up-disabled')
            }
            $('.num input').eq(num).val(text)

        });



        /**
         选中: checkbox-on
         结算按钮样式: disabled-btn
         加减按钮禁用：down-disabled
         */
    </script>
</body>

</html>